<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static '/js/jquery-3.3.1.js' %}"></script>
    <script src="{% static '/js/vue.js' %}"></script>


</head>
<body>
<div id="topic-list">
{% for all_topic in all_topics %}
    <a href="{% url 'topic' all_topic.title %}" class="topic-item">{{ all_topic.title }}</a><br>
{% endfor %}
</div>
   <form method="post" id="comment-form">
        {% csrf_token %}
       <label for="topic">主题</label><input type="text" name="topic" id="topic"><br>

        <label for="first-comment">楼主留言:</label><input type="text" height="30" name="first_comment" id="first-comment">
        <input type="submit" value="submit" id="comment-submit">
    </form>
<script>
    $(function () {
        $("#comment-form").submit(function () {
            var topic = $("#topic").val();
            var firstComment = $("#first-comment").val();
            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
            });
            $.ajax({
                type: "post",
                dataType: "json",
                url: "/forum/",
                data: {
                    'topic': topic,
                    'firstComment': firstComment
                },
                success: function(data)
                {
                    console.log(data);
                    $("#comment-form")[0].reset();

                    $("#topic-list").append("<a href=\"{"+"% \'topic\'"+topic+"%} class=\"topic-item\">"+topic+"</a><br>")
                }

            });
            return false;
        });
    });
</script>
</body>
</html>